<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户资料完善</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="js/mdialog.css">
	<script src="js/zepto.js"></script>
	<script src="js/touch.js"></script>
	<script src="js/zpDialog.js"></script>
	<script src="js/zpDialogTwo.js"></script>
	<script src="js/zpDialogThree.js"></script>
	<script src="js/zpDialogFour.js"></script>
	<script src="js/zpDialogFive.js"></script>
	<script src="js/zpDialogSix.js"></script>
	<script src="js/zpDialogSeven.js"></script>
	<script type="text/javascript" src="js/mdialog.js"></script>
	<script type="text/javascript" src="js/sweetalert.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/css/sweetalert.css"/>
	<link rel="stylesheet" href="js/css/main.css" />
	<style type="text/css">
	#imghead1{
    		width:310px; 
	        height:310px; 
	        border-radius: 180px;
    	}
		.round {
		   padding:10px; width:300px; height:50px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers */
		   -webkit-border-radius: 5px;   /* Webkit browsers */
		   border-radius:5px;            /* W3C syntax */
		}
		#imghead2{
    		width:50px; 
	        height:50px; 
	        border-radius:200px; 
    	}
	
  	</style>
	   <style> 
.loadingWrap{  
    position:fixed;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    z-index:300;  
    background-image:url(csh/image/loading.gif);  
    background-repeat:no-repeat;  
    background-position:center center;  
    background-color:#000;  
    background-color:rgba(0,0,0,0.5);  
    filter:alpha(opacity=50);  
}  
</style>
<style>
.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
	.demo{width:500px; margin:60px auto 10px auto}
}
button, .button {
	background-color: #AEDEF4;color: white;border: none;box-shadow: none;
	font-size: 17px;font-weight: 500;font-weight: 600;
	border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>
<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="layer/2.4/layer.js"></script>
<script type="text/javascript">
	function imageUpload(){
		window.location.href="<%=path%>/csh/imageUpload.jsp";
	}
	function addressSearch(){
		var nickname=document.getElementById("nickname").value;
		var mobile=document.getElementById("mobile").value;
		var openid=document.getElementById("openid").value;
		var img=document.getElementById("img").src;
		console.log(nickname+"\t"+mobile);
		window.location.href="<%=path%>/u/JumpaddressSearch1?nickname="+nickname+"&mobile="+mobile+"&openid="+openid+"&img="+img;
	}
	function nuber(){
		swal("Good!", "已经提交成功", "success");
	};
	 function one(){
	   	   var address=document.getElementById("address").value;
	   	   var dong=document.getElementById("dong").value;
	   	   var nickname=document.getElementById("nickname").value;
	   	   var unitbuilding=document.getElementById("unitbuilding").value;
	   	   var roomandnumber=document.getElementById("roomandnumber").value;
	   	   var mobile=document.getElementById("mobile").value;
	   	   var name = /^[\u4E00-\u9FA5_a-zA-Z]{2,10}$/;
	   	   var phone =/^1[3|5|7|8]\d{9}$/;
	   	   var dongs=/^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$/;
	   	   var unitbuildings=/^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$/;
	   	   var roomandnumbers=/^[0-9]{1,10}$/;
	   	   if(!name.test(nickname)){
	   	   		alert("姓名格式不符,请输入正确姓名");
	   	   }else if(!phone.test(mobile)){	
	   	   		alert("手机号码不符,请输入正确手机号");
	   	   }else if(address==""){
	   	   		alert("请选择对应小区");
	   	   }else if(!dongs.test(dong)){
	   	   		alert("楼栋格式不符,请输入 正确楼栋");
	   	   }else if(!roomandnumbers.test(roomandnumber)){
	   	   		alert("房间号格式不符,请输入 正确房间号");
	   	   }else{
	   	   		 if(unitbuilding == ""){
	   	   			$('#code').center(); 
				    $('#goodcover').show();
				    $('#code').fadeIn();
				    setInterval("tow()", 1000);
	   	   		 }else if(!unitbuildings.test(unitbuilding)){
	   	   			alert("单元格式不符,请输入正确单元");
	   	   		 }else{
	   	   			$('#code').center(); 
				    $('#goodcover').show();
				    $('#code').fadeIn();
				    setInterval("tow()", 1000);
	   	   		}
	   	   	}
	    };
</script>
<script type="text/javascript">
    function tow() {
     	 $("#form").submit();
         //$('#code').hide();
         //$('#goodcover').hide();
    };
$(function() {
    
	$('#goodcover').click(function() {
        $('#code').hide();
        $('#goodcover').hide();
    });
    /*var val=$(window).height();
	var codeheight=$("#code").height();
    var topheight=(val-codeheight)/2;
	$('#code').css('top',topheight);*/
     jQuery.fn.center = function(loaded) {
        var obj = this;
        body_width = parseInt($(window).width());
        body_height = parseInt($(window).height());
        block_width = parseInt(obj.width());
        block_height = parseInt(obj.height());

        left_position =10; //parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
        if (body_width < block_width) {
            left_position =10; //0 + $(window).scrollLeft();
        };

        top_position =parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
        if (body_height < block_height) {
            top_position = + $(window).scrollTop();
        };

        if (!loaded) {

            obj.css({
                'position': 'absolute'
            });
            obj.css({
                'top': 200,//($(window).height() - $('#code').height()) * 0.5,
                'left': 35,//left_position
            });
            $(window).bind('resize', function() {
                obj.center(!loaded);
            });
            $(window).bind('scroll', function() {
                obj.center(!loaded);
            });

        } else {
            obj.stop();
            obj.css({
                'position': 'absolute'
            });
            obj.animate({
                'top': top_position
            }, 400, 'linear');
        }
    }
})
</script>
</head>
  <body >
  	<div class="container-fluid">
      <div class="row">
      	<form id="form" action="<%=path%>/u/add" method="post" enctype="multipart/form-data">
      	<input type="hidden" id="openid" name="openid" value="${openid}">
      	
     	<table border="0px solid red" width="100%" height="100%">
     		<tr height="20%">
     			<td colspan="2" align="center">
     				<div style="text-align: center; padding-bottom: 18px;">
	 					<label>
			   		 		<!-- <input type="file"  name="filepath" id="filepath1"  value=""  style="display: none;" /> -->
							    <div id="preview1">
	 								<img alt="" id="img" src="${uploadImg}" style="width:110px;height: 110px;border-radius: 180px;">	
	 								<input type="hidden" name="uploadImg" value="${uploadImg}">	
	 					  		</div>
						</label>
					</div>
     			</td>
     		</tr>
     		<tr height="1.5%">
     			<td colspan="2" align="center" style="background-color: #f2f3f4">
     			</td>
     		</tr>
     		
     		
     		<tr height="8.5%" >
     			<td style="width: 15%">
 					&nbsp;&nbsp;&nbsp;姓名
 				</td>
 				<td >
 					<input type="text"   name="nikname" id="nickname" value="${nickname}"   style="height: 35px;width:100%;:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;  padding-right: 15px;" >
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		
     		
     		<tr height="8.5%" >
     			<td style="width: 25%">
 					&nbsp;&nbsp;&nbsp;手机号码
 				</td>
 				<td >
 					<input type="text" disabled="disabled" name="moblie" id="mobile" value="${mobile}"  style="height: 35px;width:100%;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;  padding-right: 15px;" >
 					<input type="hidden" name="moblie" value="${mobile}">
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		
     		
     		<tr height="8.5%" >
     			<td style="width: 15%">
 					&nbsp;&nbsp;&nbsp;身份
 				</td>
 				<td >
 					<input type="text" disabled="disabled" name="model" id="model" value="业主"   style="height: 35px;width:100%; color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right; padding-right: 15px;" >
 					<input type="hidden" name="model" value="业主">
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		
     		
     		<tr height="8.5%" >
     			<td style="width: 15%" >
 					&nbsp;&nbsp;&nbsp;小区
 				</td>
 				<td onclick="addressSearch()">
 					<input type="text" name="address" id="address" value="${address}"  style="height: 35px;width:100%;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;  padding-right: 15px;" >
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%">
     			</td>
     		</tr>
     		
     		
     		<tr height="8.5%" >
     			<td style="width: 15%">
 					&nbsp;&nbsp;&nbsp;楼栋
 				</td>
 				<td >
 					<%-- <input type="text" name="dong" id="dong" value="${dong}"  style="height: 35px;width:100%;font-size: 20px;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;" > --%>
 					<c:if test="${list=='[]'}">
 						<input type="text" name="dong" id="dong" value="${dong}"  style="height: 35px;width:100%;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;  padding-right: 15px;" >
 					</c:if>
 					<c:if test="${list eq null}">
 						<input type="text" name="dong" id="dong" value="${dong}"  style="height: 35px;width:100%;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;  padding-right: 15px;" >
 					</c:if>
 					<c:if test="${fn:length(list)>1}">
	 					<select  name="dong" id="dong" style="height: 35px;width:100%;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right; padding-right: 15px;">
	 						<c:forEach var="v" items="${list}">
	 							<option value="${v}">${v}</option>
	 						</c:forEach>
	 					</select>
 					</c:if>
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		
     		<tr height="8.5%" >
     			<td style="width: 15%">
 					&nbsp;&nbsp;&nbsp;单元
 				</td>
 				<td >
 					 <input type="text" name="unitbuilding" id="unitbuilding" value="${unitbuilding}"  style="height: 35px;width:100%;font-size: 20px;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;" >
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		<tr height="8.5%" >
     			<td style="width: 15%">
 					&nbsp;&nbsp;&nbsp;房间号
 				</td>
 				<td >
 					 <input type="text" name="roomandnumber" id="roomandnumber" value="${roomandnumber}"  style="height: 35px;width:100%;font-size: 20px;color:#bfc7cc;border-left-width:0px;border-top-width:0px;border-right-width:0px;border:0;padding:0;text-align: right;" >
 				</td>
     		</tr>
     		<tr	height="0.5%">
     			<td  colspan="2" align="center" style="background-color: #f2f3f4;width: 100%" >
     			</td>
     		</tr>
     		
     		<tr height="15.5%"  style="background-color: #f2f3f4">
					<td colspan="2" align="center">
						<button  type="button" style="padding: 10px 20px;border-radius: 10px; background:none; border: 0; color: #333; width:200px;height: 50px;font-size: 20px;background-color:#27a2f0;color: #ffffff" onclick="one()">确定</button>
					</td>
     		</tr>
     	</table>
     	</form>
			<div id="code" style="height: 100px;width: 250px" >
  				<div class="code-img" align="center">
  				<img  src="csh/image/603318281.jpg" style="height: 180px;width: 180px;" onclick="tow()">
  				</div> 
			</div>
      </div>
    </div>
  </body>
</html>
